<template>
<view>
  <!-- 搜索框组件 -->
  <GoSearch/>

  <!-- 轮播图 -->
  <view class="wrap">
		<u-swiper :list="swiperList" name="image_src" mode="none" :effect3d="true" :circular="true" :height="340"></u-swiper>
	</view>

  <!-- 分类导航 -->
  <view class="categoryWrapper">
    <u-image width="100%" height="150rpx" :src="item.image_src" v-for="item in categoryList" :key="item.name" class="categoryImage" mode="widthFix"></u-image>
  </view>

  <!-- 楼层 -->
  <view class="floorWrapper">
    <floorItem v-for="item in floorList" :key="item.name" :item="item"/>
  </view>
</view>
</template>

<script>
import GoSearch from '../../components/GoSearch/GoSearch.vue'
import floorItem from './components/FloorItem.vue'

export default {
  components: { GoSearch,floorItem },
  data(){
    return{
      swiperList:[],
      categoryList:[],
      floorList:[]
    }
  },
  onLoad() {
    this.getSwiper(),
    this.getCategory(),
    this.getFloor()
  },
  methods:{
    // 获取轮播图数据
    async getSwiper(){
      const {message} =await this.$u.get('/home/swiperdata')
      this.swiperList=message.map(item =>{
        return {
          ...item,
          image_src: item.image_src.replace('https://','http://')
        }
      })
    },
    // 获取页面导航图片数据
    async getCategory(){
      const {message} =await this.$u.get('/home/catitems')
      this.categoryList=message
    },
    // 获取首页楼层数据
    async getFloor(){
      const {message} =await this.$u.get('/home/floordata')
      this.floorList=message
    }
  }
}
</script>

<style lang="scss" scoped>
// 首页导航样式
.categoryWrapper{
  display: flex;
  justify-content:space-around;
  margin-top: 12rpx;
  .categoryImage{
    width: 128rpx;
    height: 140rpx;
  }
}
// 楼层样式
.floorWrapper{
  margin-top: 43rpx;
}
</style>